<template>
  <el-dialog
    title="添加"
    :visible.sync="dialogVisible"
    width="752px"
    :before-close="handleClose"
  >
    <div class="Content">
      <div class="btnBox pa-mb-3">
        <div
          class="btn"
          v-for="(item, index) in tabs"
          :key="index"
          @click="handleTab(item)"
          :class="dialogData.withCodeStatus == item.value ? 'checked' : ''"
        >
          {{ item.label }}
        </div>
      </div>
      <el-form
        ref="form"
        :model="dialogData"
        label-width="130px"
        :rules="rules"
      >
        <el-row class="pa-mb-4">
          <el-col :span="dialogData.withCodeStatus == 1 ? 12 : 24">
            <el-form-item label="时间">
              <div style="line-height:48px">{{ dialogData.createTime }}</div>
            </el-form-item>
          </el-col>
          <template v-if="dialogData.withCodeStatus == 1">
            <el-col :span="12">
              <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="dialogData.projectName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户姓名" prop="userName">
                <el-input v-model="dialogData.userName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="contactInformation">
                <el-input v-model="dialogData.contactInformation"></el-input>
              </el-form-item>
            </el-col>
          </template>
          <!-- 有码 -->
          <el-col v-if="dialogData.withCodeStatus == 0" :span="24">
            <div class="pa-flex">
              <div class="flag"></div>
              <div>选择项目</div>
            </div>
            <div class="search">
              项目名称
              <el-input
                v-model="queryParams.projectName"
                placeholder="项目名称"
                class="input"
              ></el-input>
              <el-button class="search-button" @click="getList">搜索</el-button>
              <el-button class="reset-button" @click="reset">重置</el-button>
            </div>
            <el-table
              :data="tableData"
              style="width: 100%"
              v-loading="loading"
              @row-click="singleElection"
            >
              <el-table-column width="30px">
                <template slot-scope="scope">
                  <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                  <el-radio
                    class="radio"
                    v-model="templateSelection"
                    :label="scope.row.id"
                  ></el-radio>
                </template>
              </el-table-column>
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="80px"
              ></el-table-column>
              <el-table-column
                prop="projectName"
                label="项目名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="projectLeader"
                label="联系人"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="projectPhone"
                label="联系方式"
                align="center"
              ></el-table-column>
            </el-table>
            <el-pagination
              v-if="paginationConfig.total > 0"
              class="pagination"
              :total="paginationConfig.total"
              :current-page="paginationConfig.pageNo"
              :page-size="paginationConfig.pageSize"
              :page-sizes="[10, 20, 30, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="changeCurrentPage"
              @size-change="changeSizePage"
            />
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户咨询描述" prop="content">
              <el-input type="textarea" v-model="dialogData.content"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="帮办员回复内容" prop="replyContent" label-width="140px">
              <el-input
                type="textarea"
                v-model="dialogData.replyContent"
              ></el-input>
            </el-form-item>
          </el-col>
          <div class="foot pa-text-rt">
            <el-button class="pa-mr-2" @click="handleClose">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import moment from "moment";
import { DialogListApi, addApi } from "@/api/workApi";
export default {
  name: "WorkAdd",
  props: {
    dialogVisible: Boolean,
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabs: [
        {
          label: "有码项目",
          value: 0
        },
        {
          label: "无码项目",
          value: 1
        }
      ],
      queryParams: {
        projectName: "", //项目名称
        current: 1,
        size: 1
      },
      paginationConfig: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      dialogData: {
        withCodeStatus: 0,
        createTime: undefined,
        projectName: undefined,
        userName: undefined,
        contactInformation: undefined,
        content: undefined,
        replyContent: undefined,
        projectId: undefined
      },
      rules: {
        projectName: [{ required: true, message: "项目名称不能为空" }],
        userName: [{ required: true, message: "用户姓名不能为空" }],
        contactInformation: [{ required: true, message: "联系方式不能为空" }],
        content: [{ required: true, message: "用户咨询描述不能为空" }],
        replyContent: [{ required: true, message: "帮办员回复内容不能为空" }]
      },
      loading: false,
      tableData: [],
      templateSelection: ""
    };
  },
  watch: {
    type(val) {
      if (val) {
        this.dialogData.withCodeStatus = val
      }
    },
    
    dialogVisible(val) {
      if (val) {
        this.dialogData.createTime = moment(new Date()).format(
          "yyyy-MM-DD HH:mm:ss"
        );
      }
    },
    "dialogData.withCodeStatus"(val) {
      if (val == 0) {
        this.getList();
      }
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    singleElection(row) {
      this.templateSelection = row.id;
      this.dialogData.projectName = row.projectName;
      this.dialogData.userName = row.projectLeader;
      this.dialogData.contactInformation = row.projectPhone;
      this.dialogData.projectId = row.id;
    },
    changeCurrentPage(pageNo) {
      this.paginationConfig.pageNo = pageNo;
      this.getList();
    },
    changeSizePage(pageSize) {
      this.paginationConfig.pageSize = pageSize;
      this.getList();
    },
    async getList() {
      try {
        this.loading = true;
        const res = await DialogListApi({
          projectName: this.queryParams.projectName,
          agencyPeople: JSON.parse(localStorage.getItem("P-User-Info")).id,
          ...this.paginationConfig
        });
        this.tableData = res.data.records;
        this.paginationConfig.total = res.data.total;
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
    reset() {
      this.queryParams.projectName = "";
      this.getList();
    },
    async submit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await addApi(this.dialogData);
          if (res.code == 0) {
            this.$message.success("添加成功");
            (this.dialogData = {
              withCodeStatus: 0,
              createTime: undefined,
              projectName: undefined,
              userName: undefined,
              contactInformation: undefined,
              content: undefined,
              replyContent: undefined,
              projectId: undefined
            }),
              this.handleClose();
          }
        }
      });
    },
    handleClose() {
      this.$emit("update:dialogVisible", false);
      this.$emit("refresh");
    },
    handleTab(item) {
      if (item.value === 1) {
        delete this.dialogData.projectId;
      } else {
        this.dialogData.projectId = undefined;
      }
      this.dialogData.withCodeStatus = item.value;
    }
  }
};
</script>
<style lang="scss" scoped>
.pagination {
  text-align: right;
  margin: 10px 0;
}
:deep(.Content) {
  .btnBox {
    display: flex;

    .btn {
      padding: 9px 16px;
      border: 1px solid #4880ff;
      border-radius: 17px 17px 17px 17px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #4880ff;
      margin-right: 16px;
      cursor: pointer;

      &.checked {
        color: #fff;
        background: #4880ff;
      }
    }
  }

  .flag {
    width: 8px;
    height: 20px;
    background: #4880ff;
    border-radius: 4px 4px 4px 4px;
    margin-left: 68px;
    margin-right: 8px;
    margin-bottom: 27px;
  }

  .search {
    margin-bottom: 30px;

    .input {
      width: 215px;
      height: 48px;
      box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
      border-radius: 14px;
      margin-left: 16px;
    }

    .search-button {
      width: 90px;
      height: 41px;
      background: #4880ff;
      border-radius: 19px;
      margin-left: 24px;
      color: #fff;
    }

    .reset-button {
      width: 90px;
      height: 41px;
      background: #fff;
      border-radius: 19px;
      margin-left: 24px;
      color: #333;
    }
  }

  .el-form-item__label {
    margin-right: 0 !important;
  }

  .foot {
    .el-button--primary {
      padding: 12px 20px;
      font-size: 14px;
    }
  }
}
</style>
